@charset 'UTF-8';

.container {
    width: 1200px;
    margin: 0 auto;
}

.social_responsibility_warp {
    .social_responsibility_box {


        .container {
            padding-left: 0;
            padding-right: 0;

            .cons {
                .title {
                    h2 {
                        font-size: 26px;
                        margin-top: 50px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                        margin-bottom: 0;
                    }

                    p {
                        padding: 50px 0 30px;
                        margin-bottom: 0;
                    }
                }

                .con {
                    ul {
                        overflow: hidden;
                        position: relative;

                        li {
                            &:nth-of-type(1) {
                                .centent1 {
                                    overflow: hidden;

                                    &:hover img {
                                        transform: scale(1.05);
                                    }

                                    img {
                                        width: 100%;
                                        transition: 0.8s all ease;
                                    }
                                }
                            }

                            &:nth-child(2) {
                                // margin-left: 22px;
                                background: url(../images/ss.jpg) no-repeat;
                                background-size: cover;
                                overflow: auto;
                                position: absolute;
                                left: 50%;
                                top: 0;
                                bottom: 0;
                                right: 0;
                            }

                            // padding: 0 5px;
                            float: left;
                            width: 50%;
                            overflow: hidden;
                            cursor: default;

                            .centent2 {
                                position: relative;
                                // height: 100%;
                                overflow: hidden;
                                max-width: 100%;

                                .aaa {
                                    position: relative;
                                    top: 0px;
                                    width: auto;
                                    margin-right: 30px;
                                    overflow: hidden;

                                    .bbb {
                                        padding: 30px;

                                        p {
                                            color: white;
                                        }
                                    }

                                    .ccc {
                                        position: absolute;
                                        display: block;
                                        opacity: 0.75;

                                        .ddd {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            bottom: 0;
                                            right: 0;
                                            height: auto;

                                            .eee {
                                                position: absolute;
                                                height: 240px;
                                                top: 9px;
                                                cursor: pointer;

                                                width: 100%;

                                                .fff {
                                                    background: #fff;
                                                    width: 8px;
                                                    height: 100%;
                                                    margin: 0 auto;
                                                    border-radius: 10px;
                                                    text-align: center;
                                                    position: relative;
                                                    line-height: 240px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                        }

                        .col-lg-6 {
                            padding-left: 15px;
                            padding-right: 0;
                        }
                    }
                }
            }
        }
    }

    .kong {
        .container {
            margin-top: 50px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            color: #6e7276;
        }

    }

    .social {
        .container {
            ul {
                li {
                    width: 33.33%;
                    float: left;
                    height: 303px;



                    >a {
                        text-decoration: none;

                        &:hover .con {
                            background: #2b43a7;
                            color: #fff;
                            padding: 10px 10px;
                            box-shadow: 0 0 6px rgb(0 0 0 / 50%);

                        }

                        img {
                            // width: 393px;
                            width: 100%;
                            height: 221px;

                        }

                        .con {
                            padding: 10px 0;
                            color: #000;

                            p {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}